<!--
 * @Description: 导入淘客商品
 * @Author: liyujie
 * @Date: 2021/07/07
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/07/07
-->
<template>
    <section class="wrapper">
        <el-dialog
            title="导入客户淘客"
            :visible.sync="dialogVisible"
            width="540px"
            :close-on-click-modal="false"
            @close="handleClose"
        >
            <div class="dialog-content">
                <el-form
                    :model="ruleForm"
                    :rules="rules"
                    ref="ruleForm"
                    label-width="78px"
                >
                    <el-form-item label="店铺名称">
                        <el-select
                            v-model="ruleForm.shop_no"
                            filterable
                            remote
                            placeholder="请输入客户的店铺名称"
                            :remote-method="fnSearchShop"
                            @change="handleSelect"
                            :loading="loading"
                            size="small"
                            style="width:315px"
                        >
                            <el-option
                                v-for="item in shopListChoose"
                                :key="item.shop_no"
                                :label="item.shop_title"
                                :value="item.shop_no"/>
                        </el-select>
                        <span :style="{'margin': '0px 5px 0 6px'}">(选填)</span>
                        <el-popover
                            placement="bottom-start"
                            width="280"
                            trigger="hover"
                            content="导入客户商品时，如该客户已有店铺，则需导入至该客户的已有店铺中去，以防出现多个店铺的情况">
                            <el-button
                                slot="reference"
                                type="text"
                            >
                                <span
                                    class="iconfont el-icon-hand-ziyuan"
                                    :style="{'color': '#606266'}"
                                />
                            </el-button>
                        </el-popover>
                    </el-form-item>
                    <el-form-item
                        label="商品链接"
                        prop="url"
                    >
                        <el-input
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 6}"
                            v-model="ruleForm.url"
                            placeholder="请输入商品链接"
                            size="small"
                        />
                    </el-form-item>
                    <el-form-item label="商品分类">
                        <el-cascader
                            placeholder="请选择商品分类"
                            :options="typeList"
                            filterable
                            clearable
                            size="small"
                            expand-trigger="click"
                            v-model="ruleForm.fication"
                            :props="{
                                label: 'title',
                                value: 'no',
                                children: 'children'
                            }"
                            style="width: 350px"
                        />
                        <span style="margin-left: 6px">(选填)</span>
                    </el-form-item>
                </el-form>
            </div>
            <div class="dialog-footer">
                <el-button
                    size="medium"
                    style="width: 120px"
                    @click="dialogVisible = false"
                >
                    取消
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    style="width: 120px;margin-left: 52px"
                    @click="handleConfirm"
                >
                    确定
                </el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
export default {
    name: "ImportTaoGoods",
    props: {
        typeList: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            dialogVisible: false,
            ruleForm: {
                shop_no: '',
                url: '',
                fication: ''
            },
            rules: {
                url: [
                    {required: true, message: '请输入商品链接', trigger: 'blur'}
                ],
            },
            loading: false,
            shopListChoose: [],
        };
    },

    mounted() {},

    methods: {

        /**
         * 显示弹窗
         */
        show() {
            this.dialogVisible = true;
        },

        /**
         * @description 弹窗关闭清空数据
         */
        handleClose() {
            this.ruleForm = {
                shop_no: '',
                url: '',
                fication: ''
            };
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '/';
            return val;
        },

        /**
         * 店铺搜索
         */
        fnSearchShop(word) {
            if(word != '') {
                this.loading = true;
                this.$post('/student/shop%5Csuggest', {
                    keyword: word
                }, resp => {
                    if (resp.code == 1) {
                        this.shopListChoose = resp.data.list;
                    }
                });
                this.loading = false;
            }else{
                this.shopListChoose = [];
            }
        },
        handleSelect(no) {
            this.shopListChoose.map((item, index) => {
                if(item.shop_no == no) {
                    this.ruleForm.shop_logo = item.shop_logo;
                }
            });
        },

        /**
         * 提交
         */
        handleConfirm() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    this.$post('/student/shop_goods_collect%5Cimport', {
                        content: this.ruleForm.url,
                        shop_no: this.ruleForm.shop_no,
                        type_no: this.ruleForm.fication[1]
                    }, resp => {
                        if (resp.code == 1) {
                            this.dialogVisible = false;
                            this.$emit('update');
                            this.$notify({
                                title: '提示',
                                type: 'success',
                                message: '导入成功'
                            });
                        } else {
                            this.$notify({
                                title: '提示',
                                type: 'warning',
                                message: resp.msg
                            });
                        }
                    });
                }
            });
        }
    }
};
</script>

<style scoped lang="less">
.wrapper {
    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow:0 1px 0 0 rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    /deep/ .el-dialog__body {
        padding: 24px 32px;
    }
    .dialog-footer {
        display: flex;
        justify-content: center;
    }
}
</style>
